<template>
  <div>
    <!--<el-table
      :data="[patient]"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      v-show="patient"
    >
      <el-table-column label="门诊号" prop="id" align="center" width="180">
        <template slot-scope="{ row }">
          <span>{{ clinicNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="name" align="center" width="100">
        <template slot-scope="{ row }">
          <span @click="showItem(row)">
            <a>{{ row.name }}</a>
          </span>
        </template>
      </el-table-column>

      <el-table-column label="性别" prop="gender" align="center" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.gender | gender }}</span>
        </template>
      </el-table-column>

      <el-table-column label="年龄" prop="birth" align="center" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.birth | age }}</span>
        </template>
      </el-table-column>

      <el-table-column label="地址" prop="addr" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.addr }}</span>
        </template>
      </el-table-column>
    </el-table>-->

    <el-row :gutter="20" class="patientInfo" v-show="patient">
      <el-col :span="5">
        <p class="grid-content bg-purple">门诊号:{{clinicNo}}</p>
      </el-col>
      <el-col :span="2">
        <p class="grid-content bg-purple">姓名:{{patient.name}}</p>
      </el-col>
      <el-col :span="2">
        <p class="grid-content bg-purple">性别:{{patient.gender | gender}}</p>
      </el-col>
      <el-col :span="2">
        <p class="grid-content bg-purple">年龄:{{patient.birth | age}}</p>
      </el-col>
      <el-col :span="4">
        <p class="grid-content bg-purple">联系电话:{{patient.tel}}</p>
      </el-col>
      <el-col :span="4">
        <p class="grid-content bg-purple">住址:{{patient.addr}}</p>
      </el-col>
    </el-row>

    <el-tabs type="border-card" :active-name="activeName">
      <el-tab-pane v-for="(item, index) in list" :key="item.id + '_' + index" :label="item.project"
                   :name="item.project">
        <el-row>
          <form-item :list="item.children"></form-item>
        </el-row>
      </el-tab-pane>
      <el-tab-pane name="prescription" label="处方">处方</el-tab-pane>
      <el-tab-pane name="fee" label="其他收费">其他收费</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import FormItem from "@/components/Clinic/FormItem";
  import {getTree} from "@/utils/info-item-tree";

  import {getClinicTreat} from "@/api/treat"

  export default {
    name: "Page",
    components: {
      FormItem
    },
    created() {
      window.app = this;
      getClinicTreat({}).then(response => {
        if (response.code === 200) {
          this.list = getTree(response.page.list)
          this.activeName = this.list.length > 0 ? this.list[0].project : ""
        }
      })
      // this.list = getTree(data);
    },
    data() {
      return {
        patient: {"id":1,"name":"caine","gender":1,"birth":"1999-12-30","addr":"松山湖","tel":"159****2002","idCard":"123","remark":"sys","version":1,"createDate":"2020-02-27T16:41:48.000+0000",
          "createBy":"sys:admin","lastUpdateBy":"admin","lastUpdateDate":"2020-04-08T03:20:39.000+0000","del":false},
        clinicNo:"010320041116132124",
        activeName: '',
        list: []
      };
    },
    filters: {
      gender(g) {
        return g == 1 ? "男" : "女"
      },
      age(strBirthday) {
        if (strBirthday) {
          let strBirthdayArr = strBirthday.split("-");
          let d = new Date();
          let yearDiff = d.getFullYear() - strBirthdayArr[0];
          let monthDiff = d.getMonth() + 1 - strBirthdayArr[1];
          let dayDiff = d.getDate() - strBirthdayArr[2];
          let age = monthDiff < 0 || (monthDiff === 0 && dayDiff < 0) ? yearDiff - 1 : yearDiff;
          //判断有没有到生日,没到就减1
          return age <= 0 ? monthDiff + "月" : age + "岁";
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .patientInfo{
    margin-left: 0 !important;
    color: rgb(156, 159, 165);
    font-size: 14px;
  }
  .social-signup-container {
    margin: 20px 0;
    .sign-btn {
      display: inline-block;
      cursor: pointer;
    }
    .icon {
      color: #fff;
      font-size: 24px;
      margin-top: 8px;
    }
    .wx-svg-container,
    .qq-svg-container {
      display: inline-block;
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      padding-top: 1px;
      border-radius: 4px;
      margin-bottom: 20px;
      margin-right: 5px;
    }
    .wx-svg-container {
      background-color: #24da70;
    }
    .qq-svg-container {
      background-color: #6ba2d6;
      margin-left: 50px;
    }
  }
</style>
